<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title><style>
    .box1{
        width:300px;
        height: 300px;
        background-color: antiquewhite;
        padding: 10px;
        border:1px solid red;
        /*相对定位，不会释放所占据的空间，不完全脱离文档流*/
        position: relative;
        /*绝对定位，会释放空间*/
        /*position: absolute;*/
        /*广告布局，窗体固定位置，不随滑条移动*/
        /*position: fixed;*/
        top:30px;
        /*float: left;*/
    }
    .box2{
        width:300px;
        height: 300px;
        background-color: #ccc;
        padding: 10px;
        border:1px solid red;
        /*会释放空间*/
        position: fixed;
        right: 10px;
        /*float: left;*/
    }
    .box3{
        width:300px;
        height: 300px;
        background-color:aqua;
        padding: 10px;
        border:1px solid red;

        /*float: left;*/
        /*clear: left;!* 清除左侧浮动：box3的左侧不允许有浮动元素 *!*/
    }
</style>
</head>
<body>
<div class="box1">
    box1
</div>
<div class="box2">
    box2
</div>
<div class="box3">
    box3
</div>
</body>
</html>